<template>
<div class="home">
    <!-- <Mynav></Mynav> -->
    <el-container>
        <el-header style="height:100px " :style="{'background-color':changecolor}">
            <Myheader class="myheader"></Myheader>
        </el-header>
        <el-container>
            <el-aside width="auto" :style="{'background-color':changecolor}">
                <Mynav></Mynav>
            </el-aside>
            <el-main>
                <Breadcrumb class="bread"></Breadcrumb>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</div>
</template>

<script>
import Breadcrumb from "../components/breadcrumb";
import Mynav from "../components/Mynav";
import Myheader from "../components/Myheader";
export default {
    name: "Home",
    data() {
        return {};
    },
    computed: {
        changecolor() {
            return this.$store.state.selectcolor.currentcolor;
        },
    },
    components: {
        Mynav,
        Breadcrumb,
        Myheader,
    },
};
</script>

<style lang="less" >
.el-header {
    // background-color: #FDE8EF;
    // background-color: #FDE8EF;
    color: #333;
    // text-align: right;
    // line-height: 100px;
    // height: 20vh;
}

.el-aside {
    // background-color: #FDE8EF;
    background-color: #8db596;
    //  background-color: transparent !important ;
    color: #333;
    text-align: left;
    height: calc(~"100vh - 100px"); //less语法动态调整宽高
}

.el-main {
    // background-color: #838383;
    background-color: #eeecda;
    color: #333;
    text-align: center;
    height: calc(~"100vh - 100px");
}

body>.el-container {
    margin-bottom: 40px;
}

.myheader {
    width: 100%;
}
.bread{
  font-size: 18px;
  margin-bottom: 30px;
  width: 100%;
  padding-bottom: 20px;
  border-bottom: 1px solid gray;
}

// .el-container:nth-child(5) .el-aside,
// .el-container:nth-child(6) .el-aside {
//   line-height: 260px;
// }

// .el-container:nth-child(7) .el-aside {
//   line-height: 320px;
// }
</style>
